<template>
  <view class="goods-detail">
    <!-- 1 轮播图 start -->
    <!-- 轮播图的高 等于图片的高 图片比例 1:1  宽度和高度一样 图片铺满整个屏幕  宽度，高度：750rpx -->
    <!-- 随便指定一个高度  里面的图片  渲染模式 mode="aspectFit aspectFit " -->
    <!-- 指定了外层容器的高度，让里面的图片等比例拉伸，直到某一边碰到外层边界 -->
    <u-swiper
      @click="onPreviewImage"
      img-mode="aspectFit"
      :list="goods.pics"
      height="500"
      name="pics_big"
    ></u-swiper>
    <!-- 1 轮播图 end -->

    <!-- 2 商品价格 start -->
    <view class="goods_price">￥{{goods.goods_price}}</view>
    <!-- 2 商品价格 end -->

    <!-- 3 商品名称 start -->
    <view class="goods_name">￥{{goods.goods_name}}</view>
    <!-- 3 商品名称 end -->

    <!-- 4 图片详情 start  -->
    <!-- 富文本 数据渲染 v-html -->
    <!-- 存在 富文本标签 自带  -->
    <!-- <rich-text :nodes="goods.goods_introduce"></rich-text> -->
    <u-parse :html="goods.goods_introduce"></u-parse>

    <!-- 4 图片详情 end -->

    <!-- 5 购物车工具栏 start -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <view class="item car">
          <u-badge
            class="car-num"
            :count="count"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </view>
      </view>
      <view class="right">
        <view
          @tap="onAddCart"
          class="cart btn u-line-1"
        >加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
    <!-- 5 购物车工具栏 end -->
  </view>
</template>

<script>
export default {
  // data(){
  //   return {}
  // },
  data: () => ({
    // 商品对象
    goods: null,
  }),
  computed: {
    // 要购买的商品的总数量
    count() {
      return this.$store.state.cartList.reduce(
        (beforeSum, value) => (beforeSum += value.count),
        0
      );
    },
  },
  // 设置了goods_id 默认值
  async onLoad({ goods_id = 47868 }) {
    const res = await this.$u.api.getGoodsDetail({ goods_id });
    this.goods = res.message;
  },
  methods: {
    onPreviewImage(index) {
      const urls = this.goods.pics.map((pic) => pic.pics_big);
      const current = urls[index]; // 要显示的图片地址
      uni.previewImage({ urls, current });
    },
    // 点击加入到购物车
    onAddCart() {
      // 1 把store中数组获取出来
      const cartList = this.$store.state.cartList;
      // 2 判断一下当前的商品 是否已经添加到购物车
      const index = cartList.findIndex(
        (goods) => goods.goods_id === this.goods.goods_id
      );

      if (index === -1) {
        // 添加
        cartList.push({ ...this.goods, checked: true, count: 1 });
      } else {
        // 修改对应的数据的数量
        cartList[index].count++;
      }

      this.$store.commit("changeList", cartList);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-detail {
  padding-bottom: 104rpx;
}
.navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>
